import React, { Component } from 'react'
import classnames from 'classnames'

import '../sass/index.scss'
import { commonCss } from '../utils/common'

const styles = {
  all: {
    padding: 15,
    margin: 15,
    border: '1px solid #000',
    cursor: 'pointer',
    borderRadius: 10,
  }
}

export default class MyCss extends Component {
  render() {
    return (
      <div style={styles.all}>
        <h3 className='title'>MyCss - React 样式书写</h3>
        <h4 style={{ lineHeight: '20px', color: '#999' }}>内联样式</h4>
        <h4 style={Object.assign(commonCss.baseStyle, styles.all)}>全局变量 外部样式</h4>
        <h4 style={{ ...commonCss.baseStyle, ...styles.all }}>解构对象 + 外部样式</h4>
        <h4 className={classnames('title', 'subtitle')}>React is so cool</h4>
        <h4 className={classnames({ title: true, subtitle: true })}>classnames - 是否有效</h4>
      </div >
    )
  }
}
